<template>
    <el-menu default-active="2" class="el-menu-vertical-demo">
      <template v-for="item in menuData">
        <recursive-menu :menu="item" />
      </template>
    </el-menu>
  </template>
  
  <script>
  import { defineComponent } from 'vue'
  import RecursiveMenu from './RecursiveMenu.vue'
  
  export default defineComponent({
    name: 'MenuDemo',
    components: {
      RecursiveMenu, // 引用递归菜单组件
    },
    data() {
      return {
        menuData: [
          {
            id: 1,
            title: '系统设置',
            children: [
              {
                id: 11,
                title: '选项1111',
                path: '/about'
              },
              {
                id: 12,
                title: '选项2',
              },
            ],
          },
          {
            id: 2,
            title: '导航项1',
            children:[
                {
                    id:21,
                    title:'导航选项1',
                    children:[
                        {
                            id:221,
                            title:'导航选项221'
                        }]
                }
            ]
          },
          {
            id: 3,
            title: 'Navigator Three',
          },
        ],
      }
    },
    
  })
  </script>